export function initBannerSlider(bannerId) {
  const banner = document.getElementById(bannerId);
  if (!banner) {
    console.error(`Element with ID "${bannerId}" not found.`);
    return;
  }

  let isDragging = false;
  let startPosX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationId = null;
  let activeAdom= null;

  // 初始化 transform 样式
  banner.style.transform = `translateX(${currentTranslate}px)`;

  // 获取边界值
  function getBoundaries() {
    const containerWidth = banner.parentElement.offsetWidth;
    const trackWidth = banner.scrollWidth;
    return {
      min: Math.min(0, containerWidth - trackWidth), // 修正 min 值计算
      max: 0
    };
  }

  // 拖拽开始
  function dragStart(e) {
    if (e.type === 'mousedown' && e.button !== 0) return;
    isDragging = true;
    startPosX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
    banner.classList.add('dragging');
     if( e.target.tagName === 'A'){
          activeAdom = e.target;
          setTimeout(() => {
            activeAdom.classList.add('pointer-events-none');
          }, 200);
      }
    cancelAnimationFrame(animationId);
  }

  // 拖拽中
  function drag(e) {
    if (!isDragging) return;
    e.preventDefault();
    const currentPosX = e.clientX || e.touches[0].clientX;
    const diff = currentPosX - startPosX;
    const { min } = getBoundaries();
    // 弹性边界处理
    let newTranslate = prevTranslate + diff;
    if (newTranslate > 0) {
      // 右边界弹性
      const overshoot = Math.min(newTranslate, 300); // 弹性距离300px
      newTranslate = overshoot * 0.3; // 弹性系数
    } else if (newTranslate < min) {
      // 左边界弹性
      const overshoot = Math.min(min - newTranslate, 300); // 弹性距离300px
      newTranslate = min - overshoot * 0.3; // 弹性系数
    }
    currentTranslate = newTranslate;
    banner.style.transform = `translateX(${currentTranslate}px)`;
  }

  // 拖拽结束
  function dragEnd() {
    if (!isDragging) return;
    isDragging = false;
    if(activeAdom){
        activeAdom.classList.remove('pointer-events-none');
        activeAdom = null;
    }
    banner.classList.remove('dragging');
    const { min } = getBoundaries();
    if (currentTranslate > 0 || currentTranslate < min) {
      // 回弹到边界
      const target = currentTranslate > 0 ? 0 : min;
      animateTo(target);
    } else {
      prevTranslate = currentTranslate;
    }
  }

  // 平滑回弹动画
  function animateTo(target) {
    const startTime = performance.now();
    const duration = 200; // 缩短动画持续时间
    const startPos = currentTranslate;
    function step(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeProgress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;

      currentTranslate = startPos + (target - startPos) * easeProgress;
      banner.style.transform = `translateX(${currentTranslate}px)`;

      if (progress < 1) {
        animationId = requestAnimationFrame(step);
      } else {
        currentTranslate = target;
        prevTranslate = target;
      }
    }

    animationId = requestAnimationFrame(step);
  }

  // 绑定事件监听器
  banner.addEventListener('mousedown', dragStart);
  banner.addEventListener('touchstart', dragStart, { passive: false });
  banner.addEventListener('mousemove', drag);
  banner.addEventListener('touchmove', drag, { passive: false });
  banner.addEventListener('mouseup', dragEnd);
  banner.addEventListener('touchend', dragEnd);
  banner.addEventListener('mouseleave', dragEnd);

  // 窗口大小变化时调整位置
  window.addEventListener('resize', () => {
    const { min } = getBoundaries();
    currentTranslate = Math.max(min, Math.min(0, currentTranslate));
    prevTranslate = currentTranslate;
    banner.style.transform = `translateX(${currentTranslate}px)`;
  });
}